<template>
  <div class="page">
    <HomeLayout>
      <!-- 左内容 -->
      <template #content>
        <el-card class="box-card article-tab-card">
          <!-- 设置滑动至底时加载新内容 -->
          <ArticleTabs :articles="articles" @load="handleLoadArticle" @clickItem="handleClickArticle"></ArticleTabs>
          <div v-if="isEnd" class="end-info-wrapper">— 已经到达最底部了 —</div>
        </el-card>
      </template>
      <!-- 右侧边栏 -->
      <template #sidebar>
        <BannerCard class="banner-card"
          url="https://img-blog.csdnimg.cn/0c08cb69081543b980f2fe731c086f20.jpeg?x-oss-process=image/resize,m_fixed,h_300,image/format,png" />
        <BannerCard class="banner-card"
          url="https://th.bing.com/th/id/R.a24681921b0dd81e25585f1c6070a3bd?rik=W63Ur8eyGK5AIA&riu=http%3a%2f%2fupload.mobiletrain.org%2f2020%2f0825%2f1598348906917.png&ehk=eofXSSO9BmklmRXfdF4N%2f9sr6jq9HrdyF6KrRnCVuhM%3d&risl=&pid=ImgRaw&r=0" />
        <ArticleRankCard title="热门文章" :rank="rank" />
      </template>
    </HomeLayout>
  </div>
</template>

<script>
import HomeLayout from './layout.vue'
import ArticleTabs from './components/ArticleTabs.vue'
import BannerCard from './components/BannerCard.vue'
import ArticleRankCard from '@/components/ArticleRankCard.vue'
import api from '@/api'
import { mapState } from 'vuex'
export default {
  name: "HomeView",
  components: {
    HomeLayout,
    ArticleTabs,
    BannerCard,
    ArticleRankCard
  },
  data() {
    return {
      // 文章列表
      articles: [], //debug
      // 排行榜数据
      rank: [
        { _id: 1, title: "我做的百度飞桨PaddleOCR .NET调用库", readCount: 999 },
        { _id: 2, title: "我用ChatGPT做直播技术选型，卷死了同事", readCount: 888 },
        { _id: 3, title: "现代图片性能优化及体验优化指南 - 响应式图片方案", readCount: 777 },
        { _id: 4, title: "这些「误区」99%的研发都踩过", readCount: 666 },
        { _id: 5, title: "JavaScript速通教程", readCount: 555 },
        { _id: 6, title: "Vue响应式讲解", readCount: 444 },
        { _id: 7, title: "CSS3新功能特性", readCount: 333 },
        { _id: 8, title: "Koa后端的基础入门", readCount: 222 },
        { _id: 9, title: "你不知道的几个高效编码方式", readCount: 111 },
        { _id: 10, title: "Webpack与项目工程化", readCount: 100 }
      ], //debug
      // 是否滑动触底
      isEnd: false
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user._id
    })
  },
  mounted() {
    console.log('load article')
    // 初始化文章列表(获取最新文章)
    api.article.getLatest().then((result) => {
      const articles = result.data.articles
      this.articles = articles
    })
  },
  methods: {
    handleLoadArticle() {
      if (this.isEnd) { return }

      let id = null
      if (this.articles.length > 0) {
        id = this.articles[this.articles.length - 1]._id
      }
      console.log("id:", id)
      api.article.getLatest(id).then((result) => {
        const articles = result.data.articles
        if (articles.length != 0) {
          this.articles.push(...articles)
        } else {
          this.isEnd = true
        }
      })
    },
    // 文章Item-点击事件
    handleClickArticle(id) {
      console.log('id:', id)
      this.$router.push({ name: 'article-details', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.article-tab-card {
  padding: 10px;

  .end-info-wrapper {
    margin-top: 16px;
    font-size: 11pt;
    color: var(--el-text-color-secondary);
    text-align: center;
  }
}

.banner-card {
  margin-bottom: 18px;
}
</style>